<template>
  <div class="page todo-Detail-OpenPay">
    <hlwsk v-if="hlwskProtocol"
           @cancel="(flag)=>{this.hlwskProtocol = flag}" />
    <ydzfsd v-if="ydzfsdProtocol"
            @cancel="(flag)=>{this.ydzfsdProtocol = flag}" />
    <div v-show="!hlwskProtocol && !ydzfsdProtocol"
         class="scroll-view">
      <customHeader middleTitle="门店开通支付"
                    @leftCallBack="handleBack"></customHeader>
      <div class="page-body">
        <div class="shop-info">
          <div class="shop-name">{{data.msgContent&&data.msgContent.A}}</div>
          <div class="shop-label">
            <span v-if="data.msgStatus ==0"
                  class="label green">待处理</span>
            <span v-if="data.msgStatus ==1||data.msgStatus ==2"
                  class="label gray">已完成</span>
            <span v-if="data.msgStatus ==3"
                  class="label red">已撤回</span>
          </div>
          <p>
            <span class="left">门店ID：</span>
            <span class="right">{{data.msgContent&&this.data.msgContent.B}}</span>
          </p>
          <p>
            <span class="left">发起时间：</span>
            <span class="right">{{data.createTime?CommonUtil.timestampToTime(data.createTime):''}}</span>
          </p>
          <p v-if="data.msgStatus ==1||data.msgStatus ==2">
            <span class="left">处理时间：</span>
            <span class="right">{{data.updateTime?CommonUtil.timestampToTime(data.updateTime):''}}</span>
          </p>
          <p v-if="data.msgStatus ==1">
            <span class="left">处理结果：</span>
            <span class="right">同意</span>
          </p>
          <p v-if="data.msgStatus ==2">
            <span class="left">处理结果：</span>
            <span class="right">驳回</span>
          </p>
          <p v-if="data.msgStatus ==2">
            <span class="left">驳回原因：</span>
            <span class="right">
              <p v-for="(item,index) in data.rejectReasonList"
                 :key="index">• {{item}}</p>
            </span>
          </p>
          <p v-if="data.msgStatus ==1">
            <span class="left">已签署协议：</span>
            <span class="right">
              <span class="link"
                    @click="hlwskProtocol = true">《服务协议》</span>
              <span class="link"
                    @click="ydzfsdProtocol = true">《商户受理支付业务合作协议》</span>
            </span>
          </p>
        </div>
        <div class="detail-info"
             v-if="data['larkShopOpenPayDetailModel']&&data.larkShopOpenPayDetailModel['merchantFeeModel']">
          <div class="info-title"><span class="left">执行费率</span></div>
          <!-- <ul class="detail">
            <li v-if="merchantFeeModelZFB.feeValue&&merchantFeeModelZFB.activityType !==5">
              <div class="content">
                <span class="left">支付宝费率</span>
                <span class="right">{{merchantFeeModelZFB.feeValueText}}</span>
              </div>
              <p v-if="merchantFeeModelZFB.expiryTime"
                 class="more-info">截止时间：{{CommonUtil.timestampToTime(merchantFeeModelZFB.expiryTime)}}</p>
              <p v-if="merchantFeeModelZFB.encourageStatus == '1'"
                 class="more-info">已开启商户运营鼓励金</p>
            </li>
            <li v-if="merchantFeeModelZFB.feeValue&&merchantFeeModelZFB.activityType ==5">
              <div class="content">
                <span class="left">支付宝费率</span>
                <span class="right">
                  <p>笔单价{{merchantFeeModelZFB.unitPrice}}以下{{merchantFeeModelZFB.feeValueText}}</p>
                  <p>笔单价{{merchantFeeModelZFB.unitPrice}}以上{{merchantFeeModelZFB.feeUpvalueText}}</p>
                </span>
              </div>
              <p v-if="merchantFeeModelZFB.expiryTime"
                 class="more-info">截止时间：{{CommonUtil.timestampToTime(merchantFeeModelZFB.expiryTime)}}</p>
              <p v-if="merchantFeeModelZFB.encourageStatus == '1'"
                 class="more-info">已开启商户运营鼓励金</p>
            </li>
            <li v-if="merchantFeeModelWX.feeValue&&merchantFeeModelWX.activityType !==5">
              <div class="content">
                <span class="left">微信费率</span>
                <span class="right">{{merchantFeeModelWX.feeValueText}}</span>
              </div>
              <p v-if="merchantFeeModelWX.expiryTime"
                 class="more-info">截止时间：{{CommonUtil.timestampToTime(merchantFeeModelWX.expiryTime)}}</p>
              <p v-if="merchantFeeModelWX.encourageStatus == '1'"
                 class="more-info">已开启商户运营鼓励金</p>
            </li>
            <li v-if="merchantFeeModelWX.feeValue&&merchantFeeModelWX.activityType ==5">
              <div class="content">
                <span class="left">微信费率</span>
                <span class="right">
                  <p>笔单价{{merchantFeeModelWX.unitPrice}}以下{{merchantFeeModelWX.feeValueText}}</p>
                  <p>笔单价{{merchantFeeModelWX.unitPrice}}以上{{merchantFeeModelWX.feeUpvalueText}}</p>
                </span>
              </div>
              <p v-if="merchantFeeModelWX.expiryTime"
                 class="more-info">截止时间：{{CommonUtil.timestampToTime(merchantFeeModelWX.expiryTime)}}</p>
              <p v-if="merchantFeeModelWX.encourageStatus == '1'"
                 class="more-info">已开启商户运营鼓励金</p>
            </li>
          </ul> -->
          <ul class="detail">
            <li v-for="(pay,index) in feeList" :key="index">
              <div class="content">
                <span class="left" style="width:4rem;">{{payTypeFormate(pay.payType)}}</span>
                <span class="right" >
                  <div v-for="(fee,index2) in pay.feeModels" :key="index2">
                    <p class="more-info" style="padding:0" >
                        <span v-if="fee.bankCardType">{{CommonUtil.bandCardTypeFormate(fee.bankCardType)}}：</span>
                        <span v-if="fee.unitPrice">
                        {{`单笔金额≤ ${fee.unitPrice}元 费率${fee.feeValueText}`}}
                        <br />
                        {{`单笔金额＞${fee.unitPrice}元 费率${fee.feeUpvalueText}`}}
                        </span>
                        <span v-else>{{`费率${fee.feeValueText}`}} </span>
                    </p>
                   </div>
                </span>
              </div>
              <!-- <p v-if="fee.expiryTime"
                 class="more-info">截止时间：{{CommonUtil.timestampToTime(fee.expiryTime)}}</p>
              <p v-if="fee.encourageStatus == '1'"
                 class="more-info">已开启商户运营鼓励金</p> -->
            </li>
          </ul>
        </div>
        <div class="detail-info">
          <div class="info-title"><span class="left">基础信息</span></div>
          <ul class="detail">
            <li>
              <div class="content">
                <span class="left">商户类型</span>
                <span v-if="larkShopOpenPayDetailModel.merchantType == '01'"
                      class="right">自然人</span>
                <span v-if="larkShopOpenPayDetailModel.merchantType == '02'"
                      class="right">个体工商户</span>
                <span v-if="larkShopOpenPayDetailModel.merchantType == '03'"
                      class="right">企业商户</span>
              </div>
            </li>
            <li>
              <div class="content">
                <span class="left">公司全称</span>
                <span class="right">{{larkShopOpenPayDetailModel.merchantCompany}}</span>
              </div>
            </li>
            <li>
              <div class="content">
                <span class="left">门店简称</span>
                <span class="right">{{larkShopOpenPayDetailModel.alias}}</span>
              </div>
            </li>
            <li v-if="larkShopOpenPayDetailModel.merchantType !== '01'">
              <div class="content">
                <span class="left">营业执照注册号</span>
                <span class="right">{{larkShopOpenPayDetailModel.bussAuthNum}}</span>
              </div>
            </li>
            <li v-if="larkShopOpenPayDetailModel.merchantType !== '01'">
              <div class="content">
                <span class="left">营业执照照片</span>
                <span class="right"><img v-if="larkShopOpenPayDetailModel.yzLicensePhoto"
                       class="pic"
                       :src="repeatImgUrl(larkShopOpenPayDetailModel.yzLicensePhoto,'resize')"
                       alt=""
                       @click="showImg(larkShopOpenPayDetailModel.yzLicensePhoto)" /></span>
              </div>
            </li>
            <li v-if="larkShopOpenPayDetailModel.merchantType == '03'">
              <div class="content">
                <span class="left">法人姓名</span>
                <span class="right">{{larkShopOpenPayDetailModel.principalPerson}}</span>
              </div>
            </li>
            <li v-if="larkShopOpenPayDetailModel.merchantType == '02'">
              <div class="content">
                <span class="left">经营者姓名</span>
                <span class="right">{{larkShopOpenPayDetailModel.principalPerson}}</span>
              </div>
            </li>
            <li v-if="larkShopOpenPayDetailModel.merchantType == '01'">
              <div class="content">
                <span class="left">申请人姓名</span>
                <span class="right">{{larkShopOpenPayDetailModel.principalPerson}}</span>
              </div>
            </li>
            <li>
              <div class="content">
                <span class="left">身份证号码</span>
                <span class="right">{{larkShopOpenPayDetailModel.principalCertno}}</span>
              </div>
            </li>
            <li v-if="larkShopOpenPayDetailModel.merchantType == '03'">
              <div class="content">
                <span class="left">法人身份证照片</span>
                <span class="right"></span>
              </div>
              <p class="group-pic"><img v-if="larkShopOpenPayDetailModel.yzCertPhotoa"
                     class="pic"
                     :src="repeatImgUrl(larkShopOpenPayDetailModel.yzCertPhotoa,'resize')"
                     alt=""
                     @click="showImg(larkShopOpenPayDetailModel.yzCertPhotoa)" /><img v-if="larkShopOpenPayDetailModel.yzCertPhotob"
                     class="pic"
                     :src="repeatImgUrl(larkShopOpenPayDetailModel.yzCertPhotob,'resize')"
                     alt=""
                     @click="showImg(larkShopOpenPayDetailModel.yzCertPhotob)" /></p>
            </li>
            <li v-if="larkShopOpenPayDetailModel.merchantType == '02'">
              <div class="content">
                <span class="left">经营者身份证照片</span>
                <span class="right"></span>
              </div>
              <p class="group-pic"><img v-if="larkShopOpenPayDetailModel.yzCertPhotoa"
                     class="pic"
                     :src="repeatImgUrl(larkShopOpenPayDetailModel.yzCertPhotoa,'resize')"
                     alt=""
                     @click="showImg(larkShopOpenPayDetailModel.yzCertPhotoa)" /><img v-if="larkShopOpenPayDetailModel.yzCertPhotob"
                     class="pic"
                     :src="repeatImgUrl(larkShopOpenPayDetailModel.yzCertPhotob,'resize')"
                     alt=""
                     @click="showImg(larkShopOpenPayDetailModel.yzCertPhotob)" /></p>
            </li>
            <li v-if="larkShopOpenPayDetailModel.merchantType == '01'">
              <div class="content">
                <span class="left">申请人身份证照片</span>
                <span class="right"></span>
              </div>
              <p class="group-pic"><img v-if="larkShopOpenPayDetailModel.yzCertPhotoa"
                     class="pic"
                     :src="repeatImgUrl(larkShopOpenPayDetailModel.yzCertPhotoa,'resize')"
                     alt=""
                     @click="showImg(larkShopOpenPayDetailModel.yzCertPhotoa)" /><img v-if="larkShopOpenPayDetailModel.yzCertPhotob"
                     class="pic"
                     :src="repeatImgUrl(larkShopOpenPayDetailModel.yzCertPhotob,'resize')"
                     alt=""
                     @click="showImg(larkShopOpenPayDetailModel.yzCertPhotob)" /></p>
            </li>
          </ul>
        </div>
        <div class="detail-info">
          <div class="info-title"><span class="left">结算账户信息</span></div>
          <ul class="detail">
            <li v-if="larkShopOpenPayDetailModel.accountType =='01'">
              <div class="content">
                <span class="left">账户类型</span>
                <span class="right">对私</span></div>
            </li>
            <li v-if="larkShopOpenPayDetailModel.accountType =='02'">
              <div class="content">
                <span class="left">账户类型</span>
                <span class="right">对公</span></div>
            </li>
            <li v-if="larkShopOpenPayDetailModel.settleAccountsType =='1'">
              <div class="content">
                <span class="left">结算账户</span>
                <span class="right">法人</span>
              </div>
            </li>
            <li v-if="larkShopOpenPayDetailModel.settleAccountsType =='2'">
              <div class="content">
                <span class="left">结算账户</span>
                <span class="right">非法人</span>
              </div>
            </li>
            <li>
              <div class="content">
                <span class="left">开户银行</span>
                <span class="right">{{larkShopOpenPayDetailModel.bankCode}}</span></div>
            </li>
            <li>
              <div class="content">
                <span class="left">银行账号</span>
                <span class="right">{{larkShopOpenPayDetailModel.bankCardNo}}</span>
              </div>
            </li>
            <li>
              <div class="content">
                <span class="left">开户名</span>
                <span class="right">{{larkShopOpenPayDetailModel.bankCertName}}</span>
              </div>
            </li>
            <li v-if="larkShopOpenPayDetailModel.accountType !=='02'&&larkShopOpenPayDetailModel.settleAccountsType !=='1'">
              <div class="content">
                <span class="left">身份证号</span>
                <span v-if="larkShopOpenPayDetailModel.settleAccountsType =='1'" class="right">{{larkShopOpenPayDetailModel.principalCertno}}</span>
                <span v-if="larkShopOpenPayDetailModel.settleAccountsType =='2'" class="right">{{larkShopOpenPayDetailModel.certNo}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="data.msgStatus ==0"
           class="form-title-center">
        <i :class="isChecked?'zhk-ty':'zhk-wxz'"
           @click="isChecked = !isChecked" />
        <label>我已阅读并同意
          <span @click="hlwskProtocol = true">《服务协议》</span>
          <span @click="ydzfsdProtocol = true">《商户受理支付业务合作协议》</span>
        </label>
      </div>
      <div v-if="data.msgStatus ==0"
           class="btn-wrap fixed btn-flex">

        <div class="btn btn-reject"
             @click="btnReject">驳回</div>
        <div class="btn btn-pass"
             @click="btnPass">同意</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import config from "../../base/profile/config.json";
import hlwsk from "../../components/protocol/hlwsk";
import ydzfsd from "../../components/protocol/ydzfsd";
import jsBridge from "../../tools/jsBridge";
import { Toast, MessageBox } from "mint-ui";
export default {
  name: "todoDetailOpenPay",
  data() {
    return {
      hadDone: false,
      backTimeId: null,
      CommonUtil: CommonUtil,
      isChecked: false, //检查协议
      hlwskProtocol: false,
      ydzfsdProtocol: false,
      data: {},
      larkShopOpenPayDetailModel: {},
      merchantFeeModelZFB: {},
      merchantFeeModelWX: {},
      merchantFeeModelYSF: {},
      merchantFeeModelPOS: {},
      imgList: [],
      feeList:[],
    };
  },
  methods: {
    handleBack() {
      MessageBox.close(false);
      if (this.hadDone) {
        this.$router.go(-2);
      } else {
        this.$router.go(-1);
      }
    },
    checkImgList() {
      this.imgList = [];
      if (
        this.data.larkShopOpenPayDetailModel &&
        this.data.larkShopOpenPayDetailModel.yzLicensePhoto
      ) {
        this.imgList.push(
          CommonUtil.imgUrlFormate(
            this.data.larkShopOpenPayDetailModel.yzLicensePhoto,
            config.previewUrlPrefix
          )
        );
      }
      if (
        this.data.larkShopOpenPayDetailModel &&
        this.data.larkShopOpenPayDetailModel.yzCertPhotoa
      ) {
        this.imgList.push(
          CommonUtil.imgUrlFormate(
            this.data.larkShopOpenPayDetailModel.yzCertPhotoa,
            config.previewUrlPrefix
          )
        );
      }
      if (
        this.data.larkShopOpenPayDetailModel &&
        this.data.larkShopOpenPayDetailModel.yzCertPhotob
      ) {
        this.imgList.push(
          CommonUtil.imgUrlFormate(
            this.data.larkShopOpenPayDetailModel.yzCertPhotob,
            config.previewUrlPrefix
          )
        );
      }
    },
    showImg(url) {
      let current = this.imgList.indexOf(
        CommonUtil.imgUrlFormate(url, config.previewUrlPrefix)
      );

      try {
        jsBridge.viewPicture(
          { files: this.imgList, current: current },
          function(params) {

          }
        );
      } catch (e) {
        Toast("预览失败");
      }
    },
    repeatImgUrl(url, resize) {
      if (resize) {
        return (
          CommonUtil.imgUrlFormate(url, config.previewUrlPrefix) +
          "?" +
          CommonUtil.imgUrlResize("m_fill", "230", "360")
        );
      }
      return CommonUtil.imgUrlFormate(url, config.previewUrlPrefix);
    },
    btnReject() {
      let query = {
        msgId: this.data.msgId,
        msgTitleType: this.data.msgTitleType,
        openId: this.data.openId
      };
      this.$router.push({
        path: "/todoList/todoDetailOpenPay/rejectOpenPay",
        query: query
      });
    },
    btnPass() {
      if (!this.isChecked) {
        Toast("请先阅读并同意协议内容");
      } else {
        MessageBox({
          title: "",
          message: `确认以上信息准确无误，并提交开通支付功能`,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          showCancelButton: true
        }).then(action => {
          if (action == "confirm") {
            let param = {
              msgId: this.data.msgId,
              msgStatus: 1,
              msgTitleType: this.data.msgTitleType,
              openId: this.data.openId
            };
            this.ajax({
              url: "/newapp/AppMsg/updateMsgState.do",
              type: "post",
              data: param,
              controlLoading: true
            })
              .then(res => {
                jsBridge.updateNativePage({ page: "newsPage" });
                if (res.success) {
                  if (res.success) {
                    this.hasDone = true;
                    if (res.code == 9) {
                      MessageBox({
                        title: "提示",
                        message: res.msg,
                        showCancelButton: false,
                        confirmButtonText: "知道了",
                        closeOnClickModal: false
                      }).then(action => {
                        this.$router.go(-1);
                      });
                    } else {
                      Toast("操作成功");
                      this.backTimeId = setTimeout(() => {
                        this.backTimeId = null;
                        this.$router.go(-1);
                      }, 0);
                    }
                  } else {
                    Toast(res.msg);
                  }
                } else {
                  Toast(res.msg);
                }
              })
              .catch(err => {

              });
          }
        });
      }
    },
    payTypeFormate(payType){
      let v="";
      if(payType=="01"){
        v="支付宝";
      }else if(payType=="02"){
        v="微信";
      }else if(payType=="03"){
        v="云闪付";
      }else if(payType=="04"){
        v="POS刷卡";
      }else if(payType=="00"){
        v="全部";
      }
      return v;
    },
    getTodoDetail(msgId) {
      this.ajax({
        url: "/newapp/AppMsg/getMsgDetails.do",
        type: "get",
        data: { msgId: msgId },
        controlLoading: true
      })
        .then(res => {
          if (res && res.success) {
            if (res.resultObject) {
              if( res.resultObject['larkShopOpenPayDetailModel']&&res.resultObject['larkShopOpenPayDetailModel']['merchantFeeModel']){
                res.resultObject['larkShopOpenPayDetailModel']['merchantFeeModel']=res.resultObject['larkShopOpenPayDetailModel']['merchantFeeModel'].sort((a,b)=>{return a.payType-b.payType;});
              }
              this.data = res.resultObject;
              this.larkShopOpenPayDetailModel = res.resultObject.larkShopOpenPayDetailModel;
              this.feeList = res.resultObject.payTypeModels;
              this.data.msgContent = JSON.parse(this.data.msgContent);
              // let merchantFeeModel =
              //   res.resultObject.larkShopOpenPayDetailModel.merchantFeeModel;
              //this.data.msgStatus = 0;
            
              // if (merchantFeeModel) {
              //   for (let i = 0; i < merchantFeeModel.length; i++) {
              //     if (merchantFeeModel[i].payType == "01") {
              //       this.merchantFeeModelZFB = merchantFeeModel[i];
              //     }
              //     if (merchantFeeModel[i].payType == "02") {
              //       this.merchantFeeModelWX = merchantFeeModel[i];
              //     }
              //     if (merchantFeeModel[i].payType == "03") {
              //       this.merchantFeeModelYSF = merchantFeeModel[i];
              //     }
              //     if (merchantFeeModel[i].payType == "04") {
              //       this.merchantFeeModelPOS = merchantFeeModel[i];
              //     }
              //   }
              // }
              this.checkImgList();
            } else {
              Toast(res.msg);
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    }
  },
  mounted() {
    let msgId = this.$route.query.msgId;
    this.data.msgStatus = this.$route.query.msgStatus;
    jsBridge.updateNativePage({ page: "newsPage" });
    this.getTodoDetail(msgId);
  },
  destroyed() {
    if (this.backTimeId) {
      clearTimeout(this.backTimeId);
    }
  },
  components: {
    customHeader,
    hlwsk,
    ydzfsd
  }
};
</script>
<style lang='scss' scoped>
@import "NotificationCenter";
</style>
